import React, { useEffect, useState } from 'react'
import styled from 'styled-components'


const InfoWrapper = styled.article`
    position: relative;
    padding: 6px 12px;
    box-shadow: rgb(0 0 0 / 13%) 0px 1px 4px 0px;
    border-radius: 4px;
    img {
        position: absolute;
        top: 0;
        right: 0;
    }

`;

export default function PersonalInfo() {
    const [isPhone, setIsPhone] = useState(false)


    useEffect(() => {
        const width = document.body.clientWidth
        if (width > 500) {
            setIsPhone(false)
        } else {
            setIsPhone(true)
        }

    }, [])

    return (
        <InfoWrapper>
            <h1 style={{ color: '#8BC264' }}>熊静松</h1>
            {
                <img src="https://i.ibb.co/sRfBpwR/2020-10-27-8-35-22.png" alt="" width="100" height="100" />
            }
            {
                isPhone ?
                    <>
                        <p>男 | 前端开发工程师 | 28岁 </p>
                        <p>手机：18710888072</p>
                        <p>微信：X874470891</p>
                        <p>邮箱：874470891@qq.com</p>
                    </>
                    :
                    <>
                        <p>男 | 28岁 | 前端开发工程师 | 西安</p>
                        <p>
                            手机：18710888072 | 微信：X874470891 | 邮箱：874470891@qq.com
                        </p>
                    </>
            }
        </InfoWrapper>
    )
}
